<template>
  <main class="home">
    <div class="slogan">
      <h1>{{slogan.title}}</h1>
      <h2>{{slogan.subtitle}}</h2>
      <router-link
        :to="{ name: 'News', params: { id: 456 } }"
        class="activity-news"
      >{{slogan.activity}}</router-link>
    </div>
    <section class="award">
      <div class="award-wrapper">
        <div class="award-wrap-list border-top" v-for="item of award.list" :key="item.type">
          <h1 class="award-type">{{item.type}}</h1>
          <ul>
            <li v-for="subItem of item.items" :key="subItem.title">
              <figure>
                <img :src="subItem.thumb" :alt="item.type" class="fluid-img" />
                <figcaption class="txt">
                  <h4 class="award-name">{{subItem.title}}</h4>
                  <p class="award-reward">
                    {{Number.isInteger(subItem.reward) ? subItem.reward+ ' RMB per winner' :
                    'Honorary prize'}}
                  </p>
                  <p class="award-amount">
                    {{Number.isInteger(subItem.amount)? 'X'+ subItem.amount :
                    subItem.amount}}
                  </p>
                </figcaption>
              </figure>
            </li>
          </ul>
        </div>
      </div>
      <div class="index-about">
        <p class="info" v-html="award.description"></p>
      </div>
      <div class="index-footer">
        <Button :to="{name: 'MustKnows'}" />
      </div>
    </section>
    <section class="jury">
      <div class="section-inner">
        <div class="section-header">
          <h2 class="section-title">
            2019
            <b>JURY</b>
          </h2>
          <Button colorType="plain" :to="{name: 'JuryPanel', params: {year: 2019}}" />
        </div>
        <ul class="jury-list">
          <li v-for="item of jury" :key="item.index" class="jury-item">
            <Profile :item="item" />
          </li>
        </ul>
      </div>
    </section>
    <section class="schedule">
      <div class="section-header">
        <h2 class="section-title">
          2019
          <b>SCHEDULE</b>
        </h2>
      </div>
      <div class="section-content">
        <ul class="schedule-list">
          <li v-for="item of schedule" :key="item.date" class="schedule-item">
            <h3 class="schedule-title">{{item.date}}</h3>
            <p class="schedule-intro">{{item.event}}</p>
          </li>
        </ul>
      </div>
    </section>
    <section class="nominators">
      <div class="section-header">
        <h2 class="section-title">
          <b>NOMINATORS</b>
        </h2>
        <Button colorType="primary" :to="{name: 'Nomination'}" />
      </div>
      <div class="section-content">
        <div class="nominator-list">
          <div class="nominator-part" v-for="item of nominators" :key="item.type">
            <h2 class="nominator-state">{{item.type}}</h2>
            <ul class="nominator-item-list" v-if="item.list && item.list.length">
              <li v-for="(subItem,subIndex) of item.list" :key="subItem.title">
                <router-link :to="{name: 'Nomination', params: {id: subIndex}}">
                  <img :src="subItem.thumb" :alt="subItem.title" class="fluid-img" />
                  <p class="nominator-item-name">{{subItem.title}}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="archive">
      <div class="section-header">
        <h2 class="section-title">
          SDAY
          <b>ARCHIVE</b>
        </h2>
        <Button :to="{name: 'Archive', params: {year: 2019}}" />
      </div>
      <div class="section-content">
        <ul class="archive-list">
          <li v-for="(item,index) of archive.filter((n,i)  => i < 3)" :key="index">
            <ArchiveCard :item="item" />
          </li>
        </ul>
      </div>
    </section>
  </main>
</template>

<script>
import { mapState } from "vuex";
import Button from "../components/Button";
import Profile from "../components/Profile";
import ArchiveCard from "../components/ArchiveCard";

export default {
  name: "Home",
  components: { Button, Profile, ArchiveCard },
  computed: {
    ...mapState([
      "isLogin",
      "jury",
      "award",
      "schedule",
      "archive",
      "nominators"
    ])
  },
  data() {
    return {
      slogan: {
        title: "SDAY 2019",
        subtitle: "INCLUSIVE DESIGN",
        activity: `Winners of SDAY ${new Date().getFullYear()} released`
      }
    };
  },
  created() {}
};
</script>
<style lang="scss">
  @import '@/assets/scss/home';
</style>
